<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width , user-scalable=no,initial-scale=1.0" />
<link rel="stylesheet" href="/css/myhome/common.css">
<link rel="stylesheet" href="/css/myhome/table.css">
<link rel="stylesheet" href="/css/myhome/navigation.css">

<style type="text/css">

	#s_menu_nlg_frm {
		float:right; 
		padding:3px; -webkit-border-radius: 3px; border: 1px solid gray;
		background: #eaeaea;
		z-index : 10;
		display:none;
	}

	#s_menu_nlg_frm fieldset {
		margin: 1em 0;
		padding: 1em;
		background: #eaeaea;
	}
	
	#s_menu_nlg_frm legend {
		font-weight: bold;
	}
	
	#s_menu_nlg_frm label {
		width : 200px;
		display: block;
		overflow:hidden;
	}

	#s_menu_nlg_frm input {
		width : 200px;
	}

	#s_menu_nlg_frm input:focus {
		background: #ffc;
	}
	
	#login_main {
		position: absolute;
		top: 10px;
		right: 7%;
	}
	
</style>

<script type="text/javascript" src="/js/common_lib/jquery-1.7.min.js"> </script>
<script type="text/javascript" src="/js/my_lib_new/com.zpyr.js"> </script>
<script type="text/javascript" src="/js/my_lib_new/com.zpyr.data.js"> </script>
<script type="text/javascript" src="/js/my_lib_new/com.zpyr.web.js"> </script>
<script type="text/javascript">
var hh , nav , p1;
$(document).ready(function() {
	
	hh = new com.zpyr.web.Hist();
	hh.setTargetDiv('mainContents');
	hh.addPage('', '/_blank.jsp');
	hh.addPage('dday', '/home/dday.zpr');
	hh.addPage('prof', '/home/profile.zpr');
	hh.addPage('memo', '/home/memo.zpr');
	hh.addPage('blog', '/home/blog.zpr');
	hh.addPage('html5', '/home/html5.zpr');
	// addPage 를 완료하면, hh.go(pageId) 를 통해서 원하는 페이지로 이동할 수 있다.
	hh.pageShowCB = function() {
		var pageId = hh.getPageId(location.href);
		nav.activateMenu( $('#menu_'+pageId) );
	};
	hh.hashChangeCB = function() {
		var pageId = hh.getPageId(location.href);
		nav.activateMenu( $('#menu_'+pageId) );
	};
	
	nav = new com.zpyr.web.Navigation('header_menu');
	nav.addMenu("menu_prof","프로필").click(function(){
		hh.go('prof');
	});
//	nav.addMenu("menu_dday","d-day").click(function(){
//		hh.go('dday');
//	});
	nav.addMenu("menu_memo","간단메모").click(function(){
		hh.go('memo');
	});
	nav.addMenu("menu_blog","블로그").click(function(){
		hh.go('blog');
	});
	
//	nav.addMenu("menu_html5","HTML5 Viewer").click(function(){
//		hh.go('html5');
//	});
	
	nav.appendAfter('.text_subject');
	$('.text_subject').after('<br>');
	$('.text_subject').after('<br>');
	
	p1 = new com.zpyr.web.Popup( 300 , 300 , 300 , 300 , '로그인' , 'www.naver.com' );
	p1.setDrag(false);
	
});

viewLogin = function() {
	$('#s_menu_nlg').hide();
	$('#s_menu_nlg_frm').show();
};

doLogin = function() {
	$('#s_menu_nlg').show();
	$('#s_menu_nlg_frm').hide();
};

cancelLogin = function() {
	$('#s_menu_nlg').show();
	$('#s_menu_nlg_frm').hide();
};

</script>


</head>
<body>
<article style="width:100%; margin-left:3%;">
	<div id="title" class="whole_area" style="width:90%; min-width:1100px; height:60px; margin-bottom: 5px; padding:10px;">
		<div id='login_main' >
			<div id="s_menu_nlg" style="float:right; 
			padding:3px; -webkit-border-radius: 3px; border: 1px solid gray;"><a href='javascript:viewLogin();'>로그인</a></div>
			<div id="s_menu_nlg_frm">
			<form>
			<fieldset>
				<legend>로그인 입력폼</legend>
				<p>
					<label for='login_email'>이메일:<span style="color:red; float:right; ">1dfafdadfxx</span></label>
					<input name='login_email' id='login_email' type='text' />
				</p>
				<br />
				<p>
					<label for='login_password'>비밀번호:</label>
					<input name='login_password' id='login_password' type='password' />
				</p>
				<br />
				<p>
					<span class="txt_blue_btn" onclick="doLogin();">로그인</span>
					<span class="txt_blue_btn" onclick="cancelLogin();">취소</span>
				</p>
			</fieldset>
			</form>
			</div>
			<div id="s_menu_lg" style="float:right; display:none;
			padding:3px; -webkit-border-radius: 3px; border: 1px solid gray;">로그아웃</div>
		</div>
			<p class="text_subject" style="text-align: center;">Zephyr's Homepage</p>
			
	</div>
	<div id="mainContents" class="whole_area" style="width:90%; min-width:1100px; height:700px; padding:10px;">
	
	</div>
</article>
</body>
</html>